<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" />
    <title>诚赉健康OA管理</title>
    <link rel="stylesheet" href="../css/vant.css">
    <link rel="stylesheet" href="./css/applyDetail.css">

</head>

<body>
    <div id="app" v-cloak>
        <van-nav-bar title="审批详情" left-arrow @click-left="onClickLeft"></van-nav-bar>


        <div class="topBox">
            <span>关于</span>
            <span>{{detail.projectName}}</span>
        </div>
        <div class="conBox conBox1">
            <div>
                <span>审批编号</span>
                <span>{{detail.approverNum}}</span>
            </div>
            <div>
                <span>提交时间</span>
                <span>{{detail.applyTime}}</span>
            </div>
            <div>
                <span>申请人</span>
                <span>{{detail.userName}}</span>
            </div>
            <div>
                <span>所属部门</span>
                <span>{{detail.department}}</span>
            </div>
            <div>
                <span class="editLine">具体内容


                    <span class="editBtn" @click="editHandle" v-if="isSelf && !showText && !isFinishApply">
                        修改 <van-icon name="edit"></van-icon>
                    </span>
                </span>
                <div class="detailBox">
                    <div v-for="(item,index) in detail.pdetailList" :key="index">
                        <span class="textTip" v-if="detail.pdetailList.length>1">第{{index+1}}稿：</span>
                        {{item.projectDetail}}
                    </div>
                    <div class="contentBox" v-if="showText">
                        <textarea placeholder="请输入内容" v-model="detailContent"></textarea>
                        <div class="saveBtn" @click="saveHandle">保存</div>
                        <van-icon name="cross" class="crossBtn" @click="closeHandle"></van-icon>
                    </div>

                </div>
            </div>
        </div>

        <div class="conBox">
            <div class="title">
                部门审批
            </div>
            <div v-for="(item,index) in applyUserList0" :key="index">
                <span>{{item.type}}</span>
                <span>
                    <span>{{item.status==0?'待审批':item.status==1?'已同意':'已驳回'}}</span>
                </span>
                <div class="noteCon" v-if='item.note'>{{item.status==2?'驳回原因：':'备注：'}} {{item.note}}</div>
            </div>
        </div>
        <div class="conBox">
            <div class="title">
                部门协同
            </div>
            <div v-for="(item,index) in applyUserList1" :key="index">
                <span>{{item.type}}</span>
                <span>
                    <span>{{item.status==0?'未读':'已阅'}}</span>
                </span>
                <div class="noteCon" v-if='item.note'>备注：{{item.note}}</div>
            </div>
        </div>
        <div class="conBox">
            <div class="title">
                最终审批
            </div>
            <div v-for="(item,index) in applyUserList2" :key="index">
                <span>{{item.type}}</span>
                <span>
                    <span>{{item.status==0?'待审批':item.status==1?'已同意':'已驳回'}}</span>
                </span>
                <div class="noteCon" v-if='item.note'>{{item.status==2?'驳回原因：':'备注：'}} {{item.note}}</div>
            </div>
        </div>
        <!-- v-if="isCanApply" -->
        <div class="conBox conBox2" v-if="isCanApply">
            <div class="noteBox">
                <div><img src="./img/note.png" alt="">批注</div>
                <div class="addBtn" v-if="!noteFlag" @click="noteFlag=!noteFlag"><img src="./img/edit.png" alt="">
                    填写{{userType==1?'备注':'审批意见'}}</div>
                <template v-else>
                    <textarea class="textBox" v-model="note" placeholder="请输入内容">
                    </textarea>
                    <van-icon name="cross" class="crossIcon" @click="noteFlag=!noteFlag"></van-icon>
                </template>
                <div class="btnBox">
                    <template v-if="userType==1">
                        <div @click="applyHandle(1)">已阅</div>
                    </template>
                    <template v-else>
                        <div @click="applyHandle(1)">同意</div>
                        <div @click="applyHandle(2)">驳回</div>
                    </template>
                </div>
            </div>
        </div>

        <div class="loading" v-if="mask">
            <img src="../img/load.gif">
        </div>
    </div>


    <script src="../js/vue.min.js"></script>
    <script src="../js/flex_ible/lib-flexible.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/vant.min.js"></script>
    <script src="../js/vue-lazyload.js"></script>
    <script src="../js/mui.min.js"></script>
    <script src="../js/url.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/ajax.js"></script>
    <script>
        Vue.use(VueLazyload);
        var vm = new Vue({
            el: "#app",
            data: {
                id: '',
                mask: false,
                noteFlag: false,
                note: '',
                detail: {},
                applyUserList: [],//全部部门
                applyUserList0: [], //职能部门
                applyUserList0: [], //职能部门
                applyUserList1: [],//协同部门
                applyUserList2: [],//审批部门

                isCanApply: false,// 是否可审核

                applyDepartmentID: sessionStorage.userDepartmentId,//当前需要审核的部门id
                departmentName: '',//当前需要审核的部门名称

                userType: 0,// 0 审核用户  1 协同用户
                showText: false,///是否显示输入框
                detailContent: '',//详情内容
                isFinishApply: false,//职能部门是否已完成全部审核并全部通过
                isLastApply: false,//当前是否最后一个部门审核
                userInfo: '',//用户信息
                isSelf: false,//是否是自己提交的

            },
            created() {
                this.getDepartment()
                // 获取当前用户信息
                this.userInfo = JSON.parse(sessionStorage.applyUserInfo)


                console.log(this.userInfo);
                this.detail = JSON.parse(sessionStorage.applyDetail)
                this.detail.pdetailList.reverse()
                console.log(this.detail);

                // 判断是否为本人提交的
                this.isSelf = this.userInfo.aduserId == this.detail.userId

            },
            methods: {
                // 保存内容
                saveHandle() {
                    if (this.detailContent == '') {
                        this.$toast('请输入内容')
                        return
                    }

                    var that = this;
                    that.mask = true
                    ajax({
                        type: "post",
                        url: newUrl + "varia/editApproval",
                        data: {
                            approvalId: that.detail.approvalId,
                            projectDetail: that.detailContent,
                            editType: 1
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.$toast('修改成功');
                                that.mask = false
                                that.detail.pdetailList.push({
                                    projectDetail: that.detailContent
                                })
                                that.closeHandle()
                                that.detail.editType = 1
                                console.log(that.detail);
                            } else {
                                that.$toast('修改失败');
                            }
                            that.isShow = false
                        },
                    })



                },


                closeHandle() {
                    this.showText = false
                    this.detailContent = ''
                },
                // 修改内容
                editHandle() {
                    this.showText = true
                },
                // 同意 驳回
                applyHandle(flag) {
                    if (flag == 2 && this.note == '') {
                        this.$toast('请输入驳回原因')
                        return
                    }
                    this.apply(flag)

                    console.log(flag);
                    console.log(this.note);

                },
                // 返回主页
                onClickLeft() {
                    window.location.replace("https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx9cf9f21ba0cbf62b&redirect_uri=https://www.ccclkj.cn/sharepage/OA/index.html&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect")
                },

                apply(flag) {
                    var that = this;
                    that.mask = true

                    ajax({
                        type: "post",
                        url: newUrl + "varia/addProcedures",
                        data: {
                            // nextBit: that.applyUserList0[that.applyNextIndex].type,
                            department: that.applyDepartmentID, // 审核部门id
                            // approverName: '',
                            currentState: flag,
                            remark: that.note,
                            approverView: that.userType,
                            approvalId: that.detail.approvalId,
                            approverTime: that.getTime(),
                            identification: that.isLastApply ? 0 : '', // 0 为最后一个审批
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.mask = false
                                that.getDetail()
                                that.$toast('审核成功')
                                that.note = ''
                                that.noteFlag = false
                                that.detail.editType = 0
                            } else {
                                that.$toast('审核失败');
                            }
                        },
                    })
                },
                // 获取当前时间
                getTime() {
                    var stamp = new Date().getTime() + 8 * 60 * 60 * 1000;
                    var beijingTime = new Date(stamp).toISOString().replace(/T/, ' ').replace(/\..+/, '').substring(0, 19);
                    console.log(beijingTime);
                    return beijingTime
                },

                // 获取详情
                getDetail() {
                    var that = this;
                    that.mask = true
                    ajax({
                        type: "post",
                        url: newUrl + "varia/getProcedures",
                        data: {
                            approvalId: that.detail.approvalId
                        },
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.mask = false
                                that.applyUserList0 = []
                                that.applyUserList1 = []
                                that.applyUserList2 = []
                                res.data.forEach((item, index) => {
                                    that.applyUserList.forEach((ele, eIndex) => {
                                        if (ele.id == item.department) {
                                            ele.status = item.currentState
                                            ele.note = item.remark
                                        }
                                    })
                                })

                                console.log(that.applyUserList);

                                var arr = []
                                that.applyUserList.forEach((item, index) => {
                                    // 获取用户部门类型
                                    if (item.id == that.applyDepartmentID) {
                                        that.userType = item.adepartmentType
                                    }
                                    if (item.adepartmentType == 0) {
                                        arr.push(item)
                                        // that.applyUserList0.push(item)
                                    } else if (item.adepartmentType == 1) {
                                        that.applyUserList1.push(item)
                                    } else if (item.adepartmentType == 2) {
                                        that.applyUserList2.push(item)
                                    }
                                })

                                console.log(that.userType);

                                // 筛选出审批单涉及的部门
                                that.applyUserList0 = arr.filter(item => {
                                    return that.detail.nextBit.indexOf(item.id) > -1
                                })

                                // 未涉及审核的部门放到协同部门中
                                // arr.forEach(item => {
                                //     if (that.detail.nextBit.indexOf(item.id) > -1) {
                                //         that.applyUserList0.push(item)
                                //     } else {
                                //         that.applyUserList1.unshift(item)
                                //     }
                                // })





                                // 判断职能部门是否全部通过
                                that.isFinishApply = that.applyUserList0.every(item => {
                                    return item.status == 1
                                })
                                console.log(that.applyUserList0);
                                console.log(that.applyUserList);


                                var num = 0;
                                that.applyUserList2.forEach((item, index) => {
                                    if (item.status == 0) {
                                        num++
                                    }
                                })
                                console.log(num);

                                // 是否为最后一个审核    职能部门全部通过且审批部门中只有一个未审核的
                                that.isLastApply = that.userType == 2 && that.isFinishApply && num == 1



                                if (that.userType == 0) {  //判断职能部门   1、审核记录中当前部门的审核状态为0   2、当前审核状态为驳回，且详细内容已修改
                                    that.isCanApply = (that.applyUserList0.findIndex(item => item.id == that.applyDepartmentID && item.status == 0) != -1) || ((that.applyUserList0.findIndex(item => item.id == that.applyDepartmentID && item.status == 2) != -1) && that.detail.editType == 1)
                                } else if (that.userType == 1) { // 协同部门     审核记录中当前部门的审核状态为0
                                    that.isCanApply = that.applyUserList1.findIndex(item => item.id == that.applyDepartmentID && item.status == 0) != -1
                                } else if (that.userType == 2) { // 审批部门    职能部门全部同意且当前部门没有审批过
                                    that.isCanApply = that.applyUserList0.every(item => {
                                        return item.status == 1
                                    }) && that.applyUserList2.findIndex(item => item.id == that.applyDepartmentID && item.status == 0) != -1
                                }

                                console.log(that.isCanApply);






                                // that.isCanApply =  ? false : true


                                console.log(that.isCanApply);

                            } else {
                                that.$toast('查询失败');
                            }
                        },
                    })
                },
                // 获取部门
                getDepartment() {
                    var that = this;
                    that.mask = true
                    ajax({
                        type: "post",
                        url: newUrl + "varia/getAdepartment",
                        data: {},
                        dataType: 'json',
                        timeout: 10000,
                        contentType: "application/json",
                        success: function (res) {
                            var res = JSON.parse(res)
                            console.log(res);
                            if (res.flag) {
                                that.mask = false
                                that.applyUserList = []
                                res.data.forEach((item, index) => {
                                    that.applyUserList.push({
                                        id: item.adepartmentId,
                                        type: item.adepartmentName,
                                        note: '',
                                        status: 0,
                                        adepartmentType: item.adepartmentType
                                    })
                                })
                                that.getDetail()
                                // 获取当前部门名称
                                that.getDepartmentName(that.applyDepartmentID)
                            } else {
                                that.$toast('查询失败');
                            }
                        },
                    })
                },
                getDepartmentName(id) {
                    var that = this;
                    console.log(id);
                    this.applyUserList.forEach((item, index) => {
                        if (item.id == id) {
                            that.departmentName = item.type
                        }
                    })
                },
            }
        })
    </script>

</body>

</html>